<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title v-show="navVisible">Blank1</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="false">
      <!-- <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank2</ion-title>
        </ion-toolbar>
      </ion-header> -->

      <ReadTxt @toogleNav="toogleNavVisible" />
    </ion-content>
    <!-- <nut-navbar v-show="navVisible" class="book-nav">
    <template #left>
      <Left />
    </template>
    <template #right>
      <div class="right-icon-wrap">
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-weijiashujia"></use>
        </svg>
      </div>
    </template>
  </nut-navbar> -->
    <!-- <div class="book-title" v-show="!navVisible"></div> -->
    <!-- <ReadEpub @toogleNav="toogleNavVisible" /> -->

    <!-- <div v-show="navVisible" class="bottom">
    <div class="bottom-menu">
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
        <svg class="icon" aria-hidden="true" @click="handleAddClick">
          <use xlink:href="#icon-menu"></use>
        </svg>
    </div>
   
  </div> -->
  </ion-page>
</template>
<script setup>
import { ref } from "vue";
// import ReadEpub from '@/components/ReadEpub.vue'
import ReadTxt from "@/components/ReadTxt.vue";
import { useRoute } from "vue-router";
// import { Left } from '@nutui/icons-vue'
const route = useRoute();
const id = route.params.id;

const navVisible = ref(false);
console.log(id);
const handleAddClick = () => {
  // Add to bookshelf
  console.log(id);
};

const toogleNavVisible = () => {
  navVisible.value = !navVisible.value;
};
</script>
<style scoped>
.right-icon-wrap {
  font-size: 25px;
}
.book-nav {
  transition: all 1s;
}
.book-title {
  height: var(--nut-navbar-height, 44px);
}
.bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 44px;
  background-color: #fff;
}
.bottom-menu {
  height: 44px;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
</style>
